<template>
	<view>
		<view class="head">
		  <image :src="$wanlshop.oss(seele.page_conf.icon_vip)" mode="widthFix" class="bgimg" />
		  <view class="con">
		    <!-- <image src="../../../static/images/cc/upload.png" mode="aspectFill" class="userImg" /> -->
			<image :src="$wanlshop.oss(user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill" class="userImg" />
			
		    <view class="userCon">
		      <view class="userName">{{ user.nickname }}</view>
		      <view class="texts">开通会员享受会员权益</view>
		    </view>
		  </view>
		</view>
		<view class="content">
		  <view class="member">
		    <view class="detail">
		      <view class="flex">
		        <view class="newMony"><text class="big">￥</text>{{money}}</view>
		        <view class="names">月度会员</view>
		      </view>
		      <view class="flex tops">
		        <view class="original">￥{{money_origin}}</view>
		        <view class="describe">开通会员，快去接单赚钱吧~</view>
		      </view>
		    </view>
		    <view class="open">立即开通</view>
		  </view>
		  <view class="titles">
		    <view class="line"></view>
		    <view class="tname">超级VIP专属权限</view>
		  </view>
		  <view class="box">
		    <view class="boxmove">
		      <image src="../../../static/images/cc/c1.png" mode="widthFix" class="bimg"/>
		      <view class="bname">会员专属标识</view>
		    </view>
		    <view class="boxmove">
		      <image src="../../../static/images/cc/c2.png" mode="widthFix" class="bimg"/>
		      <view class="bname">接单赚钱</view>
		    </view>
		    <view class="boxmove">
		      <image src="../../../static/images/cc/c3.png" mode="widthFix" class="bimg"/>
		      <view class="bname">专享客服</view>
		    </view>
		    <view class="boxmove border">
		      <image src="../../../static/images/cc/c4.png" mode="widthFix" class="bimg"/>
		      <view class="bname">极速售后</view>
		    </view>
		  </view>
		  <view class="agreement">开通前请阅读<text class="red">《会员服务协议》</text></view>
		</view>
		<view class="null"></view>
		<view class="bottom">
		  <view class="moneybox">
		    <view class="price"><text class="y">￥</text>{{money}}</view>
		    <view class="economize">立省{{money_origin-money}}元</view>
		  </view>
		  <view @click="doPay" class="go">确认协议并支付</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				money:'0',
				money_origin:"0"
			}
		},
		onShow(){
			this.loadMoney();
		},
		computed: {
			...mapState(['user','seele'])
		},
		methods: {
			doPay(){
				var that = this;
				uni.login({
					success: (e) => {
						console.log(e.code);
						// this.wanlPay(e.code);
						
						that.nextPay(e.code)
						
					},
					fail: (e) => {
						uni.showModal({
							content: "无法获取微信code,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})
			},
			async nextPay(code){
				await uni.request({
					url: '/wanlshop/pay/payServerMember',
					method: 'POST',
					data: {
						code: code
					},
					success: res => {
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: (e) => {
								this.$st.success("支付成功", () => {
									uni.navigateBack();
								})
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							}
						})
					}
				});
			},
			async loadMoney() {
				// 获取列表
				await uni.request({
					url: '/dispatch/server/getDeposit',
					data: {
					
					},
					success: res => {
						console.log(res);
						this.money = res.data.serv_vip_money;
						this.money_origin = res.data.serv_vip_money_origin;
					}
				});
			},
		}
	}
</script>

<style>

page{
	background-color: #fff;
}
.head {
  width: 686rpx;
  margin-left: 32rpx;
  position: relative;
}

.bgimg {
  width: 100%;
  height: 246rpx;
}

.con {
  position: absolute;
  width: 100%;
  bottom: 70rpx;
  display: flex;
  align-items: center;
}

.userImg {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  border: 2px solid #CA281C;
  margin-left: 30rpx;
}

.userCon {
  margin-left: 20rpx;
}

.userName {
  font-size: 36rpx;
  color: #CA281C;
  font-weight: 700;
}

.texts {
  font-size: 26rpx;
  color: #CA281C;
  margin-top: 10rpx;
}

.content {
  width: 750rpx;
  background-color: #fff;
  border-radius: 50rpx 50rpx 0 0;
  padding-top: 40rpx;
  margin-top: -30rpx;
  position: relative;
}

.member {
  width: 686rpx;
  margin-left: 32rpx;
  height: 190rpx;
  background-image: linear-gradient(to right, #E7DE94, #F7E893, #FEEE97);
  border-radius: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid #E4C664;
  box-sizing: border-box;
}

.open {
  width: 138rpx;
  height: 58rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #FEA40D, #F48762);
  font-size: 26rpx;
  color: #fff;
  border-radius: 50rpx;
  margin-right: 32rpx;
}

.detail {
  margin-left: 32rpx;
  /* display: flex;
  align-items: center; */
}

.flex {
  display: flex;
  align-items: center;
}

.big {
  font-size: 26rpx;
}

.newMony {
  font-size: 46rpx;
  font-weight: 700;
  color: #CA281C;
  width: 80rpx;
  margin-right: 30rpx;
  text-align: center;
}

.describe {
  font-size: 26rpx;
  color: #BFB261;
}

.original {
  width: 80rpx;
  height: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #CA281C;
  font-size: 26rpx;
  background-color: #FCC865;
  border-radius: 5rpx;
  margin-right: 30rpx;
  text-decoration: line-through;
}

.names {
  font-size: 30rpx;
  color: #3D3D3D;
}

.tops {
  margin-top: 10rpx;
}

.titles {
  width: 686rpx;
  margin-left: 32rpx;
  display: flex;
  height: 132rpx;
  align-items: center;
}

.line {
  width: 10rpx;
  height: 36rpx;
  border-radius: 2px 5px 2px 2px;
  background: linear-gradient(180deg, #F85757 0%, rgba(248, 87, 87, 0.7) 98%);
}

.tname {
  font-size: 34rpx;
  color: #333333;
  font-weight: bold;
  margin-left: 20rpx;
}
.null{
	width: 750rpx;
	height: 160rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
.bottom {
  width: 750rpx;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 17px 50px 0px rgba(0, 0, 0, 0.13);
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.go {
  width: 358rpx;
  height: 82rpx;
  background: #CA281C;
  border-radius: 50rpx;
  font-size: 34rpx;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}

.moneybox {
  display: flex;
  align-items: center;
  margin-left: 26rpx;
}

.economize {
  font-size: 30rpx;
  color: #999999;
  margin-left: 10rpx;
  margin-top: 8rpx;
}

.price {
  font-size: 46rpx;
  color: #CA281C;
  font-weight: bold;
}

.y {
  font-size: 26rpx;
}

.agreement {
  width: 686rpx;
  margin-left: 32rpx;
  font-size: 26rpx;
  margin-top: 30rpx;
  color: #999999;
}

.red {
  color: #CA281C;
}

.box {
  width: 670rpx;
  margin-left: 40rpx;
  border: 1px solid #DBDBDB;
  box-sizing: border-box;
  border-radius: 20rpx;
}

.boxmove {
  width: 100%;
  border-bottom: 1px solid #DBDBDB;
  height: 116rpx;
  display: flex;
  align-items: center;
}

.bimg {
  width: 52rpx;
  height: 52rpx;
  margin-left: 32rpx;
  margin-right: 20rpx;
}

.bname {
  font-size: 30rpx;
  color: #3D3D3D;
}

.border {
  border: 0;
}
</style>
